<template>
  <div id="container">
    <!-- 左边 -->
    <div class="left_container">
      <div class="back_btn">
        <i class="el-icon-arrow-left"></i>
        <span @click="back">返回</span>
      </div>
      <div class="left_main">
        <div class="left_item1">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">今日数据</div>
          </div>
          <div class="left_item1_content">
            <div class="top">
              <div class="top_item">
                <div class="num">{{ order_increased }}</div>
                <div class="title">今日下单数量(笔)</div>
              </div>
              <div class="top_item">
                <div class="num">{{ order_send }}</div>
                <div class="title">今日配送订单(笔)</div>
              </div>
              <!-- <div class="top_item">
                <div class="num">{{ order_increased_money }}</div>
                <div class="title">今日溯源产品(件)</div>
              </div>
              <div class="top_item">
                <div class="num">{{ send_money }}</div>
                <div class="title">今日问题商品(件)</div>
              </div> -->
            </div>
            <div class="bottom">
              <div class="chart1">
                <echart-level idname="left_item1_content" :datalist="today_rate">
                </echart-level>
              </div>
            </div>
          </div>
        </div>
        <div class="left_item2">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">今日新增订单</div>
          </div>
          <div class="left_item2_content">
            <div class="chart1">
              <data-roll :datalist="today_add_order"></data-roll>
            </div>
          </div>
        </div>
        <div class="left_item3">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">今日供应商配送商品TOP5</div>
          </div>
          <div class="left_item3_content">
            <div class="chart1">
              <echart-histogram idname="left_item3_content" :datalist="user_send_money_top5"></echart-histogram>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 中间 -->
    <div class="middle_container">
      <div class="middle_title">
        <div class="left">
          <img src="@/assets/big_data/left.png" alt="" />
        </div>
        <div class="middle">
          <h1>{{ site_title }}溯源系统</h1>
          <div class="bottom_border"></div>
        </div>
        <div class="right">
          <img src="@/assets/big_data/right.png" alt="" />
        </div>
      </div>
      <div class="middle_total">
        <div class="total">
          <div class="total_num">
            <countTo v-if="countToShow" :startVal="startVal" :endVal="endVal" :decimals="2" :duration="3000"
              :autoplay="autoplay" ref="countTo"></countTo>
            <span v-else>0.00</span>
          </div>
          <p>总配送数量</p>
        </div>
      </div>
      <div class="middle_up">
        <div class="item1">
          <img src="@/assets/big_data/big_data_fly.png" alt="" />
          <div class="content">
            <div>
              <span>今年配送数量</span>
              <img src="@/assets/big_data/big_data_up.png" alt="" />
              <span class="span2">环比去年</span>
              <em :class="{ positive: middle_data.year_rate_positive }">{{ middle_data.year_rate_positive ? "+" : ""
              }}{{ middle_data.year_rate }}%</em>
            </div>
            <h4>{{ middle_data.year_money }}</h4>
          </div>
        </div>
        <div class="item2">
          <img src="@/assets/big_data/big_data_fly.png" alt="" />
          <div class="content">
            <div>
              <span>近30天配送数量</span>
              <img src="@/assets/big_data/big_data_up.png" alt="" />
              <span class="span2">环比上月</span>
              <em :class="{ positive: middle_data.month_rate_positive }">{{ middle_data.month_rate_positive ? "+" : ""
              }}{{ middle_data.month_rate }}%</em>
            </div>
            <h4>{{ middle_data.month_money }}</h4>
          </div>
        </div>
      </div>
      <div class="middle_map">
        <div class="map_box">
          <middl-map v-if="middle_map_show" :datalist="map_user_dot" :map_center="map_center"></middl-map>
        </div>
      </div>
    </div>
    <!-- 右边 -->
    <div class="right_container">
      <div class="right_weathcer">
        <div class="time">
          <p>
            {{ time }} <span>{{ week }}</span>
          </p>
        </div>
        <div class="weather">
          <weather></weather>
        </div>
      </div>
      <div class="right_main">
        <div class="right_item1">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">近30天配送订单曲线</div>
          </div>
          <div class="right_item1_content">
            <div class="chart1">
              <echart-line idname="right_item1_content" :datalist="send_money_line"></echart-line>
            </div>
          </div>
        </div>
        <div class="right_item2">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">今日溯源产品使用统计</div>
          </div>
          <div class="right_item2_content">
            <div class="chart1">
              <!-- <echart-percent
                idname="right_item2_content"
                :datalist="send_money_percent"
              ></echart-percent> -->
              <data-roll-copy :datalist="send_money_percent"></data-roll-copy>
            </div>
          </div>
        </div>
        <div class="right_item3">
          <div class="common_title">
            <div class="triangle">
              <img src="@/assets/big_data/big_data_right.png" alt="" />
            </div>
            <div class="title">近7商品销量TOP5</div>
          </div>
          <div class="right_item3_content">
            <div class="chart1">
              <echart-histogram idname="right_item3_content" :datalist="goods_send_top10"></echart-histogram>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/utils/flexible.js";
import weather from "./components/weather.vue";
import echartHistogram from "./components/echartHistogram.vue";
import echartLine from "./components/echartLine.vue";
import echartPercent from "./components/echartPercent.vue";
import echartLevel from "./components/echartLevel.vue";
import middlMap from "./components/middlMap.vue";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { get_screen, get_total_money, getLngLat } from "@/api/bigdata/index.js";
import { parseTime, getWeekDate } from "@/utils/index.js";
import DataRoll from "./components/dataRoll.vue";
import DataRollCopy from "./components/dataRollCopy.vue";
import countTo from "vue-count-to";
import { mapGetters } from "vuex";
export default {
  components: {
    weather,
    echartHistogram,
    echartLine,
    echartPercent,
    echartLevel,
    DataRoll,
    countTo,
    middlMap,
    DataRollCopy
  },
  data() {
    return {
      parseTime,
      getWeekDate,
      time: "",
      week: "",
      fullscreen: false,

      title: "",
      // 今日数据
      order_increased: 168,
      order_increased_money: 0,
      order_send: 168,
      send_money: 0,
      today_rate: [100, 100, 100],
      // 今日新增订单
      today_add_order: [{
        name: '张三',
        time: '2023-08-01'
      }, {
        name: '李四',
        time: '2023-08-02'
      }, {
        name: '王五',
        time: '2023-08-03'
      }, {
        name: '陈六',
        time: '2023-08-04'
      }, {
        name: '冯七',
        time: '2023-08-05'
      }, {
        name: '邓八',
        time: '2023-08-06'
      }, {
        name: '许九',
        time: '2023-08-07'
      }, {
        name: '郑十',
        time: '2023-08-08'
      }],
      // 近7天用户配送金额TOP5
      user_send_money_top5: {
        title: ['白菜', '猪肉', '黄瓜', '西红柿', '鸡蛋'],
        data: [800, 600, 500, 400, 300]
      },
      // 近7商品销量TOP10
      goods_send_top10: {
        title: ["猪肉", "嫩芽白", "鸡蛋", "青菜", "毛豆"],
        data: [7854, 6582, 4853, 2654, 1452]
      },
      // 近7天各大类配送金额占比
      send_money_percent: [{
        name: '胡萝卜',
        time: '1645'
      }, {
        name: '青菜',
        time: '9862'
      }, {
        name: '包菜',
        time: '1102'
      }, {
        name: '豆芽',
        time: '561'
      }, {
        name: '鸡蛋',
        time: '789'
      }, {
        name: '豆腐',
        time: '9689'
      }, {
        name: '山药',
        time: '652'
      }, {
        name: '皮蛋',
        time: '105'
      }, {
        name: '刀豆',
        time: '12940'
      }, {
        name: '笋',
        time: '1596'
      }, {
        name: '花菜',
        time: '630'
      }, {
        name: '猪肉',
        time: '29689'
      }],
      // 近30天配送金额曲线
      send_money_line: {
        title: [],
        data: []
      },
      //中间数据
      startVal: 0,
      endVal: 0,
      countToShow: false,
      autoplay: false,
      middle_data: {
        year_money: 0,
        year_rate: 0,
        month_money: 0,
        month_rate: 0,
        total_price: 0,
        year_rate_positive: true,
        month_rate_positive: true
      },
      // 地图用户描点
      map_user_dot: [{
        name: '老王猪肉铺',
        lat: 28.701157,
        lng: 115.857997
      }],
      middle_map_show: true,
      map_center: { lng: 115.89352755, lat: 28.689578 }
    };
  },
  computed: {
    ...mapGetters(["site_title"])
  },
  methods: {
    // 全屏
    screen() {
      let element = document.documentElement;
      var requestMethod =
        element.requestFullScreen || //W3C
        element.webkitRequestFullScreen || //Chrome等
        element.mozRequestFullScreen || //FireFox
        element.msRequestFullScreen; //IE11
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    outFullCreeen() {
      let element = document;
      let requestMethod =
        element.cancelFullScreen ||
        element.webkitCancelFullScreen ||
        element.mozCancelFullScreen ||
        element.exitFullScreen;
      if (requestMethod) {
        requestMethod.call(element);
      } else if (typeof window.ActiveXObject !== "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
          wscript.SendKeys("{F11}");
        }
      }
    },
    // 返回
    back() {
      this.outFullCreeen();
      this.$nextTick(() => {
        this.$router.back(-1);
      });
    },
    // 获取随机颜色
    get_rand() {
      let color = [
        "RGBA(0, 100, 255, 1)",
        "RGBA(0, 134, 255, 1)",
        "RGBA(0, 165, 255, 1)",
        "RGBA(0, 200, 255, 1)",
        "RGBA(55, 232, 250, 1)"
      ];
      let length = color.length;
      let rand = Math.floor(Math.random() * length);
      return color[rand];
    },
    // 获取数据
    get_screen() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      get_screen(data).then(res => {
        if (res.errcode == 0) {
          this.title = res.data.title;
          this.order_increased = res.data.order_increased;
          this.order_increased_money = res.data.order_increased_money;
          this.order_send = res.data.order_send;
          this.send_money = res.data.send_money;
          this.today_rate = [
            res.data.purchase_percent,
            res.data.sort_rate,
            res.data.send_rate
          ];

          let list_arr = [];
          res.data.list.map(e => {
            let obj = { name: "", time: "" };
            obj.name = e.member ? e.member.nickname : "";
            obj.time = this.parseTime(e.created_at);
            list_arr.push(obj);
          });
          this.today_add_order = list_arr;
          // 近7天用户配送金额TOP5
          let members_title_arr = [];
          let members_title_data = [];
          res.data.members.map(e => {
            members_title_arr.push(e.nickname);
            members_title_data.push(e.send_money);
          });
          this.user_send_money_top5 = {
            title: members_title_arr,
            data: members_title_data
          };
          // 近7商品销量TOP10
          let goods_title_arr = [];
          let goods_title_data = [];
          res.data.goods.map(e => {
            goods_title_arr.push(e.goods_name);
            goods_title_data.push(e.send_money);
          });
          // this.goods_send_top10 = {
          //   title: goods_title_arr,
          //   data: goods_title_data
          // };
          // 近7天各大类配送金额占比
          let pid_arr = [];
          let pid_arr_data = res.data.pid_arr;
          for (const key in pid_arr_data) {
            let obj = {
              value: pid_arr_data[key].send_money,
              name: pid_arr_data[key].pid_name,
              itemStyle: {
                color: this.get_rand()
              }
            };
            pid_arr.push(obj);
          }
          this.send_money_percent = pid_arr;
          // 近30天配送金额曲线
          let send_money_title_arr = [];
          let send_money_title_data = [];
          res.data.send_money_list.map(e => {
            send_money_title_arr.push(e.day);
            send_money_title_data.push(e.send_money);
          });
          this.send_money_line = {
            title: send_money_title_arr,
            data: send_money_title_data
          };
          // 中间数据
          this.middle_data.year_money = res.data.year_money;
          this.middle_data.year_rate = parseFloat(res.data.year_rate);
          this.middle_data.month_money = res.data.month_money;
          this.middle_data.month_rate = parseFloat(res.data.month_rate);
          this.middle_data.total_price = res.data.total_price;
          if (this.middle_data.year_rate < 0) {
            this.middle_data.year_rate_positive = false;
          }
          if (this.middle_data.month_rate < 0) {
            this.middle_data.month_rate_positive = false;
          }

          this.endVal = res.data.total_price
            ? parseFloat(res.data.total_price)
            : 0;
          this.countToShow = true;
          this.autoplay = true;
          // 地图用户描点
          let member = [];
          res.data.member.map(e => {
            if (e.address) {
              let obj = {
                name: e.address.name,
                lat: e.address.lat,
                lng: e.address.lng
              };
              member.push(obj);
            }
          });
          this.map_user_dot = member;
          this.middle_map_show = true;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 获取总的数据
    get_total_money() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      get_total_money(data).then(res => {
        if (res.errcode == 0) {
          this.startVal = this.endVal;
          this.endVal = parseFloat(res.data.total_price);
          if (this.startVal != this.endVal) {
            this.$refs.countTo.start();
          }
        }
      });
    },
    getLngLat() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          )
        },
        apiUrl().name
      );
      getLngLat(data).then(res => {
        if (res.errcode == 0) {
          this.map_center.lng = res.data.lng_lat.x;
          this.map_center.lat = res.data.lng_lat.y;
        }
      });
    }
  },
  created() {
    // this.getLngLat();
    // this.screen();
    // this.get_screen();
    // setInterval(() => {
    //   this.time = parseTime(new Date());
    //   this.week = getWeekDate();
    // }, 1000);
    // setInterval(() => {
    //   this.get_total_money();
    // }, 600000);

  },
  mounted() { }
};
</script>

<style lang="scss" scoped>
#container {
  width: 100%;
  height: 100vh;
  background: url("././../../assets/big_data/big_data_bg1.jpg") no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;

  .left_container {
    width: 5.333333rem;
    height: 100vh;

    .back_btn {
      display: flex;
      align-items: center;
      height: 7.222%;
      border-bottom: 0.010417rem solid #0087ff;
      font-size: 0.208333rem;
      font-family: PingFang SC;
      font-weight: 600;
      color: #6bcbff;
      box-sizing: border-box;
      padding-left: 0.28125rem;
      padding-top: 0.3125rem;
      cursor: pointer;
    }
  }

  .middle_container {
    width: 9.333333rem;
    height: 100vh;
  }

  .right_container {
    width: 5.333333rem;
    height: 100vh;

    .right_weathcer {
      height: 7.222%;
      border-bottom: 0.010417rem solid #0087ff;
      padding-top: 0.3125rem;
      box-sizing: border-box;
    }
  }
}

/*公共头部 */
.common_title {
  width: 4.416667rem;
  height: 0.479167rem;
  background-image: linear-gradient(to right, #083b69, #052747);
  display: flex;
  align-items: center;
  flex-direction: row;
  box-sizing: border-box;

  .triangle {
    width: 13px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;

    img {
      width: 100%;
      margin: 0 auto;
    }
  }

  .title {
    font-size: 0.208333rem;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff;
    margin-left: 0.645833rem;
  }
}

/* 左边主体部分 */
.left_main {
  width: 100%;
  height: 92%;
  padding-left: 0.40625rem;
  padding-top: 3.8%;
  box-sizing: border-box;

  .left_item1 {
    height: 37%;
  }

  .left_item2 {
    height: 31%;
  }

  .left_item3 {
    height: 32%;
  }
}

/* 中间主体部分 */
.middle_container {
  .middle_title {
    width: 100%;
    height: 9.81%;
  }

  .middle_total {
    width: 100%;
    height: 27.3%;
  }

  .middle_up {
    width: 100%;
    height: 12%;
  }

  .middle_map {
    width: 100%;
    height: 50%;
  }
}

/* 右边主体部分 */
.right_main {
  width: 100%;
  height: 92%;
  padding-left: 0.40625rem;
  padding-top: 3.8%;
  box-sizing: border-box;

  .right_item1 {
    height: 37%;
  }

  .right_item2 {
    height: 31%;
  }

  .right_item3 {
    height: 32%;
  }
}

/* 左边模块细节部分 */
.left_item1_content {
  height: calc(100% - 46px);
  width: 4.416667rem;
  padding-left: 0.208333rem;
  padding-right: 0.416667rem;
  box-sizing: border-box;

  .top {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    height: 52%;
    padding-top: 5%;

    .top_item {
      width: 1.5625rem;
      height: 45%;

      .num {
        width: 100%;
        height: 68.75%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        font-family: Arial;
        font-weight: bold;
        color: #5ed6ff;
        background-color: #091a2eff;
        border: 1px solid #193a58;
      }

      .title {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        text-align: center;
        background-color: #092a44ff;
        border: 1px solid #193a58;
      }
    }
  }

  .bottom {
    width: 4.416667rem;
    height: 48%;
  }
}

.left_item2_content,
.left_item3_content,
.right_item1_content,
.right_item2_content,
.right_item3_content {
  padding: 0.208333rem 0.104167rem 0.208333rem;
  box-sizing: border-box;
  height: calc(100% - 46px);
  width: 4.416667rem;
}

.chart1 {
  height: 100%;
  width: 100%;
}

/* 中间细节部分 */
.middle_container {
  .middle_title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;

    .middle {
      flex: 1;
      height: 100%;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      position: relative;

      h1 {
        font-size: 27px;

        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #00f4fd;
        background: linear-gradient(0deg, #09beff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .bottom_border {
        position: absolute;
        width: 3.770833rem;
        height: 0.03125rem;
        bottom: 0;
        background: linear-gradient(90deg,
            #06497c 0%,
            #0090ff 47%,
            #06497c 100%);
      }
    }

    .left,
    .right {
      width: 2.177083rem;
      height: 100%;
      display: flex;
      align-items: center;

      img {
        width: 100%;
      }
    }
  }

  .middle_total {
    display: flex;
    align-items: center;
    justify-content: center;

    .total {
      width: 4.791667rem;
      height: 2.40625rem;
      background: url("./../../assets/big_data/big_data_card.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;

      .total_num {
        span {
          font-size: 0.614583rem;
          font-family: PingFang SC;
          font-weight: 800;
          color: #ffffff;
          line-height: 120px;
          background: linear-gradient(0deg, #76c0ff 0%, #5dd7ff 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      p {
        font-size: 0.364583rem;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        line-height: 76px;
      }
    }
  }

  .middle_up {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;

    .item1,
    .item2 {
      display: flex;
      align-items: center;
      margin: 0 0.260417rem;

      img {
        width: 0.34375rem;
      }

      .content {
        padding-left: 0.15625rem;

        div {
          span {
            &:first-child {
              font-size: 0.1875rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #eff0f1;
            }

            &:nth-child(2) {
              font-size: 0.145833rem;
              font-family: Source Han Sans CN;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .span2 {
            font-size: 0.145833rem;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #ffffff;
          }

          img {
            width: 0.15625rem;
            margin: 0 0.052083rem;
          }

          em {
            color: #60d4ff;
            font-size: 0.145833rem;

            &.positive {
              color: #ff6a6aff;
            }
          }
        }

        h4 {
          font-size: 0.34375rem;
          font-family: PingFang SC;
          font-weight: 800;
          color: #6acbff;
          line-height: 37px;
          margin-top: 0.072917rem;
        }
      }
    }
  }

  .middle_map {
    padding: 0.104167rem 0.520833rem 0.208333rem;

    .map_box {
      width: 100%;
      height: 100%;
      border-radius: 0.15625rem;
      border: 2px solid #085e7bff;
      overflow: hidden;
    }
  }
}

/* 右边细节部分 */
.right_weathcer {
  display: flex;
  align-items: center;
  flex: row;

  .time {
    font-size: 0.208333rem;
    width: 2.916667rem;
    font-family: PingFang SC;
    font-weight: bold;
    color: #6bcbff;
    padding-left: 0.15625rem;

    span {
      font-size: 0.166667rem;
    }
  }

  .weather {
    padding-left: 0.3125rem;
  }
}
</style>
